<?php include "menu.phtml"; $this->render('accounts/profile-picture.phtml'); ?>
<div id="right">
	<div class="rightbox">
		<div class="context"><div class="in"><a href="javascript:void(0);" id="context_menu" class="icon_link the_down"><span></span></a></div></div>
		<h1><?php echo $this->translate->_("Edit Profile"); ?></h1>
		<?php echo $this->form; ?>
	</div>
	<br /><br /><br /><br />
</div>
<script type="text/javascript">
	var Comply = function() {
		var perms = {0: 'public', 1: 'friends', 2: 'me', 3: 'custom'},
			type = <?php echo $this->user_type; ?>,
			translate = {
				fields: ['<?php echo $this->translate->_("Owner Information"); ?>', '<?php echo $this->translate->_("Personal Information"); ?>', '<?php echo $this->translate->_("Contact Information"); ?>', '<?php echo $this->translate->_("Address Information"); ?>', '<?php echo $this->translate->_("About us"); ?>'],
				options: ['<?php echo $this->translate->_("Public"); ?>', '<?php echo $this->translate->_("Friends"); ?>', '<?php echo $this->translate->_("Only Me"); ?>', '<?php echo $this->translate->_("Custom"); ?>'],
				custom: ['<?php echo $this->translate->_("Custom Permissions"); ?>', '<?php echo $this->translate->_("Please select the users you want to give access to this field. Only they will be allowed to see it."); ?>', '<?php echo $this->translate->_("Allowed People"); ?>', '<?php echo $this->translate->_("Save"); ?>', '<?php echo $this->translate->_("Cancel"); ?>', '<?php echo $this->translate->_("You need to select at least 1 user."); ?>']
			};

		function buildHeaders() {
			$('<h3 class="profile">' + translate.fields[0] + '</h3>').insertBefore($('div.rightbox [name="name"]').parent());
			$('<h3 class="profile">' + translate.fields[1] + '</h3>').insertBefore($('div.rightbox [name="date_of_birth"]').parent());
			$('<h3 class="profile">' + translate.fields[2] + '</h3>').insertBefore($('div.rightbox [name="phone"]').parent());
			$('<h3 class="profile">' + translate.fields[3] + '</h3>').insertBefore($('div.rightbox [name="street"]').parent());
			$('<h3 class="profile">' + translate.fields[4] + '</h3>').insertBefore($('div.rightbox [name="about_us"]').parent());
		};

		function arrangeForm() {
			var b = {},
				m = type == 1 ? [3, 2, 7, 6, 12, 11, 17] : [4, 3, 8, 7, 13, 12, 18]
				t = '<div class="left profilebox" />';

			$('h3[class="profile"]').each(function(s, i){
				b[s] = [i];
			});

			$('div.rightbox > form > div').each(function(s, i){
				if(s < m[0]) b[0].push(i);
				if(s > m[1] && s < m[2]) b[1].push(i);
				if(s > m[3] && s < m[4]) b[2].push(i);
				if(s > m[5] && s < m[6]) b[3].push(i);
			});

			$(b[0]).wrapAll(t); $(b[1]).wrapAll(t); $(b[2]).wrapAll(t); $(b[3]).wrapAll(t);
			$('<div class="clear"></div>').insertAfter($('div.rightbox > form > div').find('h3').last().parent());
		};

		function buildPrivacy() {
			var f = [];
			$('div.rightbox label').each(function(s, i) {
				f.push($(i).attr('for'));
			}); f.pop();

	    	Petolio.ajax({
				url: 'accounts/get-perms',
				type: 'post',
				data: {fields: f},
				cache: false,
				success: function (x) {
					$.each(x.settings, function(s, i){
						if(s != 'name' && s != 'about_us')
							Privacy.init($('div.rightbox [name="'+ s +'"]'), i);
					});
				}
			});
		};

		function __construct() {
			buildHeaders();
			arrangeForm();
			buildPrivacy();
		};

		return {
			init: __construct,
			getPerms: perms,
			getOptions: translate.options,
			getCustom: {custom: translate.custom, general: translate.general}
		};
	}();

	var Privacy = function() {
		var opened = initiated = false,
			perms = {}, options = [],
			increment = 103,
			template = '<ul><dfn></dfn>' +
				'<li><i class="p_public margin"></i><a href="javascript:void(0);"></a></li>' +
				'<li><i class="p_friends margin"></i><a href="javascript:void(0);"></a></li>' +
				'<li><i class="p_me margin"></i><a href="javascript:void(0);"></a></li>' +
				'<li><i class="p_custom margin"></i><a href="javascript:void(0);"></a></li>' +
			'</ul>';

		function findPerm(x) {
			var o = 0;
			$.each(perms, function(s, i){
				if(('p_'+ i) == x)
					o = s;
			});

			return o;
		};

		function closeOpened(x) {
			if(opened)
				if(x.currentTarget || opened.attr('id') !== x.attr('id'))
					close(opened);
		};

		function open(x) {
			x.addClass('privacy_down');
			x.find('ul').show();
			$(x.find('i').get(1)).removeClass().addClass('p_up');
		};

		function close(x) {
			x.removeClass('privacy_down');
			x.find('ul').hide();
			$(x.find('i').get(1)).removeClass().addClass('p_down');
		};

		function initEvents(a, b) {
			a.click(function(e){
				e.stopPropagation();

				var x = $(e.currentTarget),
					v = x.find('ul:visible').length > 0 ? false : true;

				closeOpened(x);
				opened = v ? x : false;

				if(v) open(x);
				else close(x);
			});

			a.find('li').click(function(e) {
				e.stopPropagation();

				var x = $(e.currentTarget),
					v = x.find('i').attr('class').replace(' margin', '');

				if(v == 'p_custom') {
					Custom.init(x, b, findPerm(v), v);
					close(x.closest('span'));
					return true;
				}

				if(x.hasClass('active')) {
					close(x.closest('span'));
					return true;
				}

				close(x.closest('span'));
		    	Petolio.ajax({
					url: 'accounts/set-perms',
					type: 'post',
					data: {field: b, value: findPerm(v)},
					cache: false,
					success: function () {
						changeState(x, v);
					}
				});
			});
		};

		function changeState(x, v) {
			var	y = x.closest('span').find('i').first();

			x.closest('ul').find('li').removeClass('active');
			x.addClass('active');

			y.fadeOut('fast', function() {
				y.removeClass().addClass(v).fadeIn('fast');
			});
		};

		function __construct(a, b) {
			if(!initiated) {
				$('body').click(closeOpened);
				perms = Comply.getPerms;
				options = Comply.getOptions;
				initiated = true;
			}

			var x = $('<span class="privacy_wrap"><i class="p_'+ perms[b] +'"></i><i class="p_down"></i>'+ template +'</span>').insertBefore(a.parent().find('div[class="cls"]'));
			x.find('ul li i[class*="'+ perms[b] +'"]').parent().addClass('active');
			x.find('ul li').each(function(s, i) {
				$(i).find('a').html(options[s]);
			});

			x.css({zIndex: increment});
			x.attr({id: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);})});
			increment--; if(increment < 90) increment = 103;

			x.animate({ opacity: 1 }, 500, function() {
				initEvents(x, a.attr('name'));
			});
		};

		return {
			init: __construct,
			changeState: changeState
		};
	}();

	var Custom = function() {
		var initiated = error = false,
			translate = {},
			store = {},
			users = [];

		function save(z) {
			var d = $('#multi_users').val();
			if (d == null) {
				Petolio.showMessage(translate.custom[5]);
				return;
			}

	    	Petolio.ajax({
				url: 'accounts/set-custom-perms',
				type: 'post',
				data: {field: store.b, value: store.v, users: d},
				cache: false,
				success: function () {
					Privacy.changeState(store.x, store.y);
					z.dialog("close");
				}
			});
		};

		function createWindow(x) {
			var o = '';
			$.each(users, function(s, i){
				var e = $.inArray(s, x) == -1 ? '' : ' selected="selected"';
				o += '<option value="'+ s +'"'+ e +'>'+ i.name +'</option>';
			});

			return $('<div id="dialog-p_custom" title="' + translate.custom[0] + '" class="ui-state-highlight">'+
					'<div style="margin: 8px 0px 2px 0px; line-height: 18px;">'+
						translate.custom[1] +'<br /><div class="tenpx"></div>'+
						'<select title="'+ translate.custom[2] +'" name="users[]" class="chzn-select chzn-custom" multiple="multiple" style="width:275px;" id="multi_users">'+
							o+
						'</select><br /><br /><br /><br /><br /><br /><br /><br /><br />'+
					'</div>'+
				'</div>').dialog({
	    			resizable: false,
	    			modal: true,
	    			autoOpen: false,
	    			width: 300,
	    			minHeight: 50,
	    			buttons: [{
						text: translate.custom[3],
						click: function() {
	    					save($(this));
	    				}
					}, {
						text: translate.custom[4],
						click: function() {
							$(this).dialog("close");
	    				}
					}],
	    			close: function() {
	    				$("#dialog-p_custom").remove();
	    			}
				});
		};

		function load() {
			if(error) {
				Petolio.showError();
				return false;
			}

			Petolio.showLoading();
	    	Petolio.ajax({
				url: 'accounts/get-custom-perms',
				type: 'post',
				data: {field: store.b, value: store.v},
				cache: false,
				success: function (x) {
					Petolio.hideLoading();
					var w = createWindow(x.users);

					w.dialog('open');
					$("#multi_users").data('placeholder', $("#multi_users").attr('title')).chosen({translate: Petolio.translateChosen()});
				}
			});
		};

		function __construct(x, b, v, y) {
			store = {x: x, b: b, v: v, y: y};

			if(!initiated) {
				Petolio.showLoading();
				translate = Comply.getCustom;
		    	Petolio.ajax({
					url: 'accounts/get-custom-users',
					type: 'get',
					cache: false,
					success: function (x) {
		    			Petolio.hideLoading();
						users = x.users;
						load();
					},
					error: function() {
						Petolio.showError();
						error = true;
					}
				});

		    	initiated = true;
			} else load();
		};

		return {
			init: __construct
		};
	}();

	READY(Comply.init);
</script>